<template>
  <div class="coupon">
    <div class="list" v-if="!showEmpty">不知道样式</div>
    <div class="empty" v-if="showEmpty">
      <img
        src="https://image-mall.gxptkc.com/m/resources/store/no_coupon.png"
        alt=""
      />
      <span>暂无优惠券~</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      couponList: [],
      showEmpty: false,
    };
  },
  async created() {
    let res = await this.axios.get(
      `https://m-mall.gxptkc.com/v3/promotion/front/coupon/storeCouponList?pageSize=10&current=1&storeId=${this.$route.query.storeid}`
    );
    this.couponList = res.data.data.list;
    if (this.couponList.length == 0) {
      this.showEmpty = true;
    }
  },
};
</script>

<style lang="scss" scoped>
.coupon {
  width: 100vw;
  height: calc(100vh - 195rem);
  display: flex;
  justify-content: center;
  .empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateY(-40rem);
    img {
      width: 100rem;
      height: 100rem;
    }
    span {
      color: #333;
      margin-top: 20rem;
    }
  }
}
</style>